<template>
	<view class="add">
		<dwu-navbar title="新增地址"></dwu-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="真实姓名" prop="name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.name" border="none"
						placeholder="请输入真实姓名"></u--input>
				</u-form-item>
				<u-form-item label="电话" prop="phone" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" type="number" v-model="form.phone" maxlength="11"
						border="none" placeholder="请输入电话"></u--input>
				</u-form-item>
				<u-form-item label="所在地区" prop="region" borderBottom>
					<text class="must">*</text>
					<dwu-chooseAddress :disabled="disabled" :defaultVal="form.region" placeholder="请选择所在地区"
						@onconfirm="confirmAddress"></dwu-chooseAddress>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" :readonly="disabled" v-model="form.address" border="none"
						placeholder="请输入详细地址"></u--input>
				</u-form-item>
				<u-form-item label=" " prop="email">
					<view class="set-defalut" @click="checked = !checked">
						<image v-if="checked" src="@/static/integral/checked.png" mode=""></image>
						<image v-else src="@/static/integral/check.png" mode=""></image>
						<text>设置为默认地址</text>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="submit" @click="onSubmit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					region: '',
					address: '',
					province: '',
					city: '',
					area: '',
				},
				checked: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.form['id'] = options.id
				this.getAddressDetail()
			}
		},
		methods: {
			getAddressDetail() {
				this.request.http('/user/addressDetail', 'post', {
					id: this.form.id,
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						this.form.name = data.data.name
						this.form.phone = data.data.phone
						this.form.province = data.data.province
						this.form.city = data.data.city
						this.form.area = data.data.area
						this.form.address = data.data.address
						this.form.region = data.data.province + data.data.city + data.data.area
						this.checked = data.data.is_type == 1 ? true : false
					}
				})
			},
			confirmAddress(e) {
				let addressComponent = e.addressComponent
				this.form.region = addressComponent.province + addressComponent.city + addressComponent.district
				this.form.province = addressComponent.province
				this.form.city = addressComponent.city
				this.form.area = addressComponent.district
				this.form.address = e.formatted_address
			},
			onSubmit() {
				let form = this.form
				if (!form.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入真实姓名'
					})
					return
				}
				if (!form.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入电话'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(form.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确电话'
					})
					return
				}
				if (!form.region) {
					uni.showToast({
						icon: 'none',
						title: '请选择所在地区'
					})
					return
				}
				if (!form.address) {
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址'
					})
					return
				}
				if (this.form.id) {
					this.request.http('/user/addressUpdate', 'post', {
						id: form.id,
						name: form.name,
						phone: form.phone,
						province: form.province,
						city: form.city,
						area: form.area,
						address: form.address,
						is_type: this.checked ? 1 : 0
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							uni.showToast({
								title: '修改成功',
								success: () => {
									setTimeout(() => {
										let pages = getCurrentPages();
										let prevPage = pages[pages.length - 2];
										prevPage.$vm.reset()
										uni.navigateBack()
									}, 1500)
								}
							})
						}
					})
				} else {
					this.request.http('/user/addressAdd', 'post', {
						name: form.name,
						phone: form.phone,
						province: form.province,
						city: form.city,
						area: form.area,
						address: form.address,
						is_type: this.checked ? 1 : 0
					}).then(res => {
						let data = res.data
						if (data.code == 1) {
							uni.showToast({
								title: '添加成功',
								success: () => {
									setTimeout(() => {
										let pages = getCurrentPages();
										let prevPage = pages[pages.length - 2];
										prevPage.$vm.reset()
										uni.navigateBack()
									}, 1500)
								}
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.add {
		padding: 20rpx;

		.form {
			padding: 16rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #313131;

			/deep/.u-form-item__body__left__content__label {
				font-size: 27rpx;
				color: #313131;
			}

			input {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 27rpx !important;
			}

			/deep/.u-form-item {
				position: relative;
			}

			.must {
				position: absolute;
				top: 28rpx;
				margin-left: -6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}

			.set-defalut {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 14rpx;

				image {
					width: 25rpx;
					height: 25rpx;
					margin-right: 14rpx;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #474747;
				}
			}
		}

		.submit {
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 40rpx;
			// margin: 140rpx auto 0;
			width: 650rpx;
			height: 104rpx;
			background: #3D3D3D;
			border-radius: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 31rpx;
			color: #B0DD67;
			line-height: 104rpx;
			text-align: center;

			&.edit {
				color: #FFAC98;
			}
		}
	}
</style>